<template>
  <view>
    <TopNavCustom title="修改昵称"></TopNavCustom>
    <view class="container">
      <view class="change-username">
        <u-input
          placeholder="请输入姓名"
          border="surround"
          clearable
          class="username"
          v-model="nickName"
        ></u-input>
        <button type="default" class="btn" @click="saveNickName()">保存</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      nickName: "",
    };
  },
  methods: {
    async saveNickName() {
      let newUser = {
        phone: uni.getStorageSync("phone"),
        headerUrl: uni.getStorageSync("headerUrl"),
        userName: this.nickName,
        userId: uni.getStorageSync("userId"),
        password: uni.getStorageSync("password"),
        roleId: uni.getStorageSync("roleId"),
        wxId: uni.getStorageSync("wxId"),
      };
      //connet api
      const data = await uni.$H.post("/user/updateUserInfo", newUser, {
        authCode: true,
      });
      if (data.message == "成功") {
        uni.setStorageSync("userName", this.nickName);
        uni.$showMsg("修改昵称成功！");
        uni.navigateBack({
          delta: 1,
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.change-username {
  display: flex;
  flex-direction: column;

  .username {
    background: #ffffff;
    border: 1rpx solid #ebeef5;
    margin: 30rpx 30rpx 0 30rpx;
    border-radius: 10rpx;
  }

  .btn {
    margin: 120rpx 30rpx 0 30rpx;
    background: linear-gradient(90deg, #e62129 0%, #ba000a 100%);
    box-shadow: 0rpx 5rpx 15rpx 0rpx rgba(0, 0, 0, 0.05);
    border-radius: 44rpx;
    color: #ffffff;
  }
}
</style>
